﻿@rendermode InteractiveServer
@inject IJSRuntime JsRuntime
@using Microsoft.JSInterop

<div class="search-box">
    <div class="search-box-container">
        <div class="search-icon-container">
            <span class="search-icon fa-solid fa-sharp fa-magnifying-glass"></span>
        </div>
        <div class="search-text-container">

            @if (Enabled)
            {
                <input type="search" class="form-control form-control-sm"
                       @bind-value="@Value"
                       @bind-value:event="oninput"
                       spellcheck="false"
                       autocomplete="off" placeholder="Search...">
            }
            else
            {
                <input type="search" class="form-control form-control-sm"
                       Value="@Value"
                       spellcheck="false"
                       autocomplete="off" placeholder="Search..." disabled>
            }

        </div>
    </div>
</div>


@code {

    private string _value;
    private string previousValue;


    [Parameter]
    public bool Enabled { get; set; } = true;

    [Parameter]
    public string Value
    {
        get => _value;
        set
        {
            if (value != previousValue)
            {
                _value = value;
                previousValue = _value;

                var val = _value;

                ValueChanged.InvokeAsync(val);
            }
        }
    }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

}